<template>
   <div>
     <div id="g_top" class="m-top">&nbsp;</div>
    <div class="serchContenr">
        <!-- 搜索框 -->
        <div class="serch">
          <input type="text" class="m-search-input" v-model="keywords"  @focus="toFocus" @blur="toBlur">
          <a href="javascript:;" class="btn" @click="btn"></a>
        </div>
        
         <serch v-model="keywords" v-show="showSuggest"></serch>
         <!-- 搜索建议组件 -->

        <div class="contenter">
            <!-- 动态组件tab -->
           <div class="snote">搜索“See&nbsp;You&nbsp;Again”，找到 <em class="s-fc6">20</em> 首单曲</div>
            <ul class="Tabs">
                <li 
                 v-for="(item , index) in  lists"
                 :key="index"
                 :class="['item',{'changeBG':select === index}]"
                 @click="itemClick(index)"
                >
                {{item.title}}</li>
            </ul>
               <!-- 动态组件 -->
               <keep-alive>
                   <component :is="selectd" :keywords="component_res"></component>
               </keep-alive>
        </div>
    </div>
</div>
</template>
<script>




export default {
    data() {
        return {
             keywords:"",         
             lists:[
                        {title:"歌曲"},
                        {title:"歌手"},
                        {title:"专辑"},
                        {title:"视频"},
                        {title:"歌词"},
                        {title:"歌单"},
                        {title:"主播"},
                        {title:"用户"}
                ],
            select:0,
            list_com:['songe',"vocalist","Album","Video","lyric","gedan","zhubo","user"],
            component_res:"",
            showSuggest: false,    //控制显示
        }
    },
    methods:{ 
     itemClick(index){             //控制tab样式
       this.select = index
     },
      changeURL(){                 //外部事件总线样式
          this.$bus.$emit("w_changeURL",false)
      },
      btn(){                      //搜索点击按钮
           this.component_res = this.keywords
      },
      toFocus() {
        if (this.keywords !== "") {
            this.showSuggest = true;
        } else {
            this.showSuggest = false;
        }
      },
      toBlur() {
            this.showSuggest = false;
         }
    },
    components:{
         songe:() => import ("./child_com/child_songe"),
         vocalist:() => import ("./child_com/child_vocalist"),
         Album:() => import ("./child_com/child_Album"),
         Video:() => import ("./child_com/child_video"),
         lyric:() => import ("./child_com/child_lyric"),
         gedan:() => import ("./child_com/child_gedan"),
         zhubo:() => import ("./child_com/child_zhubo"),
         user: () => import ("./child_com/child_user"),
         serch: () => import("./child_com/serch")
    },
    computed:{   //动态组件相关
        selectd(){
            return this.list_com[this.select]
        }
    },
    watch:{             //监听路由  把最新的值给keywords
        $route(to){
           this.keywords = to.query.id
           this.component_res = to.query.id
        },

    },
    created(){
        this.keywords = this.$route.query.id
        this.btn()
    }
}
</script>
<style scoped>
.m-top {
    position: relative;
    z-index: 910;
    height: 70px;
    box-sizing: border-box;
    background: #242424;
    border-bottom: 1px solid #000;
}
.serchContenr{width: 980px;min-height: 700px;background-color: #fff;border: 1px solid #d3d3d3;border-width: 0 1px; margin: 0 auto;padding: 40px;}
.serch{width: 420px; height: 40px; margin: 0 auto;background: url("../../assets/imgs/sprite.png") no-repeat; background-position: 0 0;}
.m-search-input{float: left;width: 320px;height: 17px;margin: 12px 0 0 20px;padding: 0;background: #fff;border: none;outline: 0;font-size: 12px; color: #333;}
.btn{width: 11%;height: 100%;display: inline-block;margin-left: 30px;}
 .btn:hover{ background: url("../../assets/imgs/sprite.png") no-repeat;background-position: -430px 0px;}
.contenter{width: 100%;min-height: 300px;}
.snote{margin: 28px 0 17px;color: #999; font-size: 12px;font-family: Arial, Helvetica, sans-serif;}
.s-fc6{color: #c20c0c;font-style: normal;}
.Tabs{width: 100%;min-height: 40px;display: block;display: flex;}
.item{flex: 1;text-align: center;line-height: 40px;background: url("../../assets/imgs/tab.png") no-repeat;background-position: 0px 0px;font-size: 14px;outline: none;color: #333;cursor: pointer;}
.changeBG{ background-position:0px -90px;}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>